<template>
    <div class="paysuccess">
        <div class="width-center">
            <Search></Search>
            <!-- 状态显示栏 -->
            <div class="state">
                <div class="plan">
                    <Steps :current="current">
                        <Step title="提交订单"></Step>
                        <Step title="支付"></Step>
                        <Step title="完成订单" style="width : 100px"></Step>
                    </Steps>
                </div>  
            </div>
            <!-- 支付成功内容 -->
            <div class="suconent">
                <div class="suconent-img">
                    <img src="../assets/img/state.png">
                    <div class="sucont-font">
                        <strong>订单支付成功！</strong>
                        <p>商家将会尽快安排发货！</p> 
                    </div>
                </div>
                <div class="paymoney">
                    <p class="paddleft">支付金额：<span>¥ {{total_amount}}</span></p>
                    <!-- <p class="paddleft">支付账户：支付宝(13840690396)</p> -->
                    <p>支付流水号：{{trade_no}}</p>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="pay-button">
                <div class="cancel" @click="index">返回首页</div>
                <div class="success" @click="myorder">查看订单列表</div>
            </div>
        </div>
    </div>       
</template>
<script>
import Search from "../components/search"
import { Steps , Step} from "iview"
import { orderBatchNumber,aliPayBack } from "../http/api"
export default {
    components: {
        Search,
        Steps,
        Step
    },
    data () {
        return {
            current:3,   //进度条
            data:null,
            trade_no:"",  //流水号
            total_amount:"",//支付金额
        }
    },
    methods: {
        api_orderBatchNumber () {
            orderBatchNumber().then(res=>{
                if(res.data.status == 1000){
                    this.data = res.data
                }
                // console.log(res)
            })
        },
        index () {
            this.$router.push({path:"/index"})
        },
        myorder () {
            this.$router.push({path:"/personal/myorder"})
        },      
    },
    created () {
        // this.api_orderBatchNumber()
        // 正则判断
        function UrlSearch(){ 
            var name,value; 
            var str=location.href; //取得整个地址栏
            var num=str.indexOf("?") 
            str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ]
            var arr=str.split("&"); //各个参数放到数组里
            for(var i=0;i < arr.length;i++){ 
                num=arr[i].indexOf("="); 
                if(num>0){ 
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
                } 
            } 
        } 
        var Request=new UrlSearch(); //实例化
        this.trade_no = Request.trade_no
        this.total_amount = Request.total_amount
        console.log(Request.out_trade_no)
        if(Request.out_trade_no){
            aliPayBack({outTradeNo:Request.out_trade_no}).then(res=>{
            })
        }
    }    
}
</script>
<style lang="less">
@import "../assets/styles/paysuccess.less";
</style>

